<template>
    <div class="box">
        <header>
            <!-- 头部 -->
            <TopNavView :onShow="onShow"></TopNavView>
            <!-- 导航栏 -->
            <HeaderView :list="list"></HeaderView>
            <div class="breadcrumb">
                <p>
                    <router-link to="/home/homepage">首页</router-link>
                    <i class="el-icon-arrow-right"></i>
                    <router-link to="/home/category1/1005000">居家</router-link>
                </p>
            </div>
            <div class="bannerView">
                <!-- 轮播图 -->
                <carousel-views :bannerList="bannerList"></carousel-views>
            </div>
        </header>
        <div class="sub_list">
            <h3>全部分类</h3>
            <ul class="sub_ul">
                <a class="sub_a" v-for="item in sub" :key="item.id">
                    <li class="sub_li"><img :src="item.picture" class="sub_img"></li>
                    <li class="sub_li1">{{ item.name }}</li>
                </a>
            </ul>
        </div>

        <div class="ref_goods" v-for="item in listArr" :key="item.id">
            <div class="ref_header">
                <h3>{{ item.name }}</h3>
                <p>温暖柔软，品质之选</p>
                <div class="ref_body">
                    <a class="ref_a">
                        <div class="ref_btm">
                            <img :src="item.goods[0].picture" class="ref_img1">
                            <p class="ref_p">{{ item.goods[0].name }}</p>
                            <p class="ref_p1">{{ item.goods[0].desc }}</p>
                            <p class="ref_p2">{{ item.goods[0].price }}</p>
                        </div>
                    </a>
                    <a class="ref_a">
                        <div class="ref_btm">
                            <img :src="item.goods[1].picture" class="ref_img1">
                            <p class="ref_p">{{ item.goods[1].name }}</p>
                            <p class="ref_p1">{{ item.goods[1].desc }}</p>
                            <p class="ref_p2">{{ item.goods[1].price }}</p>
                        </div>
                    </a>
                    <a class="ref_a">
                        <div class="ref_btm">
                            <img :src="item.goods[2].picture" class="ref_img1">
                            <p class="ref_p">{{ item.goods[2].name }}</p>
                            <p class="ref_p1">{{ item.goods[2].desc }}</p>
                            <p class="ref_p2">{{ item.goods[2].price }}</p>
                        </div>
                    </a>
                    <a class="ref_a">
                        <div class="ref_btm">
                            <img :src="item.goods[3].picture" class="ref_img1">
                            <p class="ref_p">{{ item.goods[3].name }}</p>
                            <p class="ref_p1">{{ item.goods[3].desc }}</p>
                            <p class="ref_p2">{{ item.goods[3].price }}</p>
                        </div>
                    </a>
                    <a class="ref_a">
                        <div class="ref_btm">
                            <img :src="item.goods[4].picture" class="ref_img1">
                            <p class="ref_p">{{ item.goods[4].name }}</p>
                            <p class="ref_p1">{{ item.goods[4].desc }}</p>
                            <p class="ref_p2">{{ item.goods[4].price }}</p>
                        </div>
                    </a>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import TopNavView from "@/components/TopNavView.vue";
import HeaderView from "@/components/HeaderView.vue";
import CarouselViews from "@/components/CarouselViews.vue";
export default {
    components: { TopNavView, HeaderView, CarouselViews },
    data() {
        return {
            list: {},
            sub: {},
            onShow: false,
            listArr: [],//分类商品列表信息
            bannerList: [],
        }
    },
    async mounted() {
        // let res = await this.$http.CategoryOneViewslist({id:1005000})
        // this.list=res.data.result.children;
        // console.log(this.list);

        let sub = await this.$http.category()
        this.sub = sub.data.result[0].children
        // console.log(sub.data.result[0].children);
    },
    methods: {
        // 导航栏数据
        async getCategory() {
            const res = await this.$http.category();
            this.list = res.data.result;
            if (this.$store.getters.getToken) {
                this.onShow = true;
            } else {
                this.onShow = false;
            }
        },
        // banner数据
        async getBanner() {
            const res = await this.$http.banner();
            this.bannerList = res.data.result;
        },
    },
    async created() {
        this.getCategory();
        this.getBanner();

        let res = await this.$http.CategoryOneViewslist({ id: 1005000 })
        this.listArr = res.data.result.children;
        console.log(this.listArr);
    },
}
</script>

<style lang="scss" scoped>
.box {
    background: #f5f5f5;
}

header {
    height: 53px;
    background: #333;
    padding: 0 140px;

    .bannerView {
        position: relative;
    }

    .slotname {
        display: flex;
        align-items: center;
    }
}

.breadcrumb {
    width: 100%;
    height: 50px;
    // background: rgb(207, 210, 210);
}

.box_header {
    width: 1240px;
    height: 132px;
    background: darkcyan;
}

.sub_list {
    width: 1240px;
    height: 260px;
    background: white;
    margin: 0 auto;
    margin-top: 705px;

    h3 {
        font-size: 28px;
        color: rgb(102, 102, 102);
        font-weight: 400;
        text-align: center;
        line-height: 100px;
    }

    .sub_ul {
        width: 1240px;
        height: 160px;
        background: white;
        display: flex;
    }

    .sub_a {
        width: 168px;
        height: 140px;
        // background:wheat;
        margin-left: 15px;
        float: left;

    }

    .sub_img {
        width: 100px;
        height: 100px;
        padding: 0px 35px;
    }

    .sub_li1 {
        text-align: center;
    }
}

.ref_goods {
    width: 1240px;
    height: 457px;
    background: white;
    margin: 0 auto;
    margin-top: 15px;

    .ref_header {
        width: 1240px;
        height: 128px;
        // background: wheat;
    }

    h3 {
        font-size: 28px;
        color: rgb(102, 102, 102);
        font-weight: 400;
        text-align: center;
        line-height: 100px;
    }

    p {
        text-align: center;
        color: rgb(153, 153, 153);
        font-size: 20px;
        position: relative;
        top: -20px;
    }

    .ref_body {
        width: 1240px;
        height: 330px;

        // background:pink;
        .ref_a {
            width: 220px;
            height: 300px;
            background: white;
            display: block;
            float: left;
            margin-left: 20px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            transition: all .5s;
        }

        .ref_btm {
            width: 160px;
            height: 300px;
            // background: rgb(175, 170, 171);
            margin-left: 25px;
        }

        .ref_img1 {
            width: 160px;
            height: 160px;
            padding: 10px 0px;
        }

        .ref_p {
            font-size: 16px;
            color: black;
            padding: 10px 0px;
            overflow: hidden;
        }

        .ref_p1 {
            font-size: 16px;
            overflow: hidden;
        }

        .ref_p2 {
            color: #cf4444;
            font-size: 20px;
            margin-top: 10px;
        }
    }

}
</style>